<!--
 * @Author: your name
 * @Date: 2020-11-26 11:12:47
 * @LastEditTime: 2020-12-02 22:54:45
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \FenXiaoShangChengAdmind:\工作资料\project_wjh\KunLunAdmin\web\KunLunAdmin\src\components\LcM\table\table_con.vue
-->

<template>
  <div class="big-list">
    <div class="table-title">
      {{ tableTitle || "-" }}
    </div>
    <!-- <top-option>
      <div slot="left-box">
        <select-search
          lableName="上架状态"
          selectIdName="sex"
          :tThis="this"
          selectPlaceholder="请选择上架状态"
          :selectOpts="sexOpts"
          selectWidth="150px;"
          labelWidth="80px;"
        />
      </div>
      <div slot="right-box">
        <div class="sub">
          <el-button @click="handleSearch" class="orange">查询</el-button>
          <el-button @click="handleAdd">添加</el-button>
        </div>
      </div>
    </top-option> -->

    <!-- 列表栏 -->
    <div class="list" :style="hiddenBorder ? 'border-width: 0;' : ''">
      <el-table
        ref="multipleTable"
        :data="defaultTableData"
        tooltip-effect="dark"
        style="width: 100%; border-radius: 4px"
        class="tableBox"
        border
        :key="showTableKey"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column
          v-for="(item, index) in tableConfig.tableItems"
          :key="index"
          :label="item.label"
          v-if="item.type == 'normal'"
        >
          <template slot-scope="scope" v-if="item.type == 'normal'">
            {{ scope.row[item.name] || "-" }}
          </template>
        </el-table-column>

        <el-table-column
          v-for="(item, index) in tableConfig.tableItems"
          :key="index"
          :label="item.label"
          v-if="item.type == 'img'"
        >
          <template slot-scope="scope" v-if="item.type == 'img'">
            <div 
                style="height: 80px;  width: 130px; margin: 0 auto;">
              <img
                v-if="scope.row[item.name]"
                :data-urlArr="JSON.stringify([scope.row[item.name]])"
                class="table-img"
                :src="scope.row[item.name]"
                alt="图片"
                style="width: 100%;"
              />
            </div>
          </template>
        </el-table-column>

        <el-table-column v-if="tableConfig.tableOpt" label="操作" width="180">
          <template slot-scope="scope"> </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="paging">
      <div class="table-paging-wrap">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPageIdx"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="onePageSize"
          layout="total, prev, pager, next, jumper"
          :total="pageCount"
          class="table-paging"
        ></el-pagination>
      </div>
    </div>

    <div class="btn-group">
      <div class="submit-btn" hidden @click.stop="handleSubmit">确认</div>
      <div class="close-btn" hidden @click.stop="handleClose">取消</div>
    </div>
  </div>
</template>

<script>
//调用

// import table_con from "@/components/LcM/table/table_con";
// "table-con": table_con

// <table-con
//     :tableData="tableData"
// />

// <table-con
//     :tableData="tableData"
// />
import jhTools from "@/utils/jhTools";

let API = {};

import top_option from "@/components/subCon/topOption";

export default {
  components: {
    "top-option": top_option,
  },
  props: {
    tableTitle: {
      type: [String],
      default: "",
    },
    //表格数据
    defaultTableData: {
      type: [Object, Array],
    },
    //表格设置
    tableConfig: {
      type: [Object],
      //请求额外参数
      // eParams: {
      //   type: [Object],
      // },
    },
    //边框隐藏
    hiddenBorder: {
      type: [String, Boolean],
    },
    //当前选中
    curCheckArr: {
      type: [Array],
    },
  },
  data() {
    return {
      //分页
      currentPageIdx: 1, //当前页与跳转框的初始值
      pageCount: 1, //总条数
      onePageSize: 10, //每页的条数

      formData: {},
      tableData: [], //当前列表数据

      showTableKey: "101",
      allMethods: "",

      //列表
      multipleSelection: [], //选择
    };
  },
  mounted() {
    this.showTableKey = Math.random().toFixed(2);
    this.allMethods = this.getAllMethods();

    this.initRequest();
    this.getInitData();

    // var _this = this;
    // setTimeout(() => {
    //   console.log(this.curCheckArr);
    //   this.curCheckArr.forEach((item, index) => {
    //     this.multipleSelection.push(item);
    //   });
    // }, 100);
    //修改默认样式
    this.initDefaultStyle();
    API = this.api;
  },
  methods: {
    /* 确认提交 */
    handleSubmit() {
      var curCheckSelection = this.multipleSelection;
      console.log("提交的结果", curCheckSelection);
      if (curCheckSelection.length == 1) {
        this.$emit("handleTableCheckArr", {
          checkArr: curCheckSelection,
        });
      } else if (curCheckSelection.length > 1) {
        this.$message({
          type: "warning",
          message: "只能选择一项",
        });
      } else if (curCheckSelection.length == 0) {
        this.$message({
          type: "warning",
          message: "请勾选一项",
        });
      }
    },

    /* 关闭 */
    handleClose() {
      this.$emit("handleCloseModel");
    },

    //编辑
    handleModify(e) {
      this.allMethods.handleModify(e);
    },

    //删除
    handleDelete(e) {
      this.allMethods.handleDelete(e);
    },

    //查询
    handleSearch() {
      this.allMethods.handleSearch();
    },
    //添加
    handleAdd(e) {
      this.allMethods.handleAdd(e);
    },

    /* 修改elmentui的默认样式 */
    initDefaultStyle() {
      setTimeout(() => {
        $(".el-pagination").css({
          textAlign: "center",
          paddingTop: "7px",
        });
      });
    },

    /* 方法抽离集合 */
    getAllMethods() {
      var _this = this;
      return {
        // //编辑
        // handleModify(e) {
        //   var { id } = e.currentTarget.dataset;
        //   _this.$router.push({
        //     path: "/member_manager_edit_member",
        //     query: { id },
        //   });
        // },

        // //删除
        // handleDelete(e) {
        //   const { id } = e.currentTarget.dataset;
        // //   var url = API.identify_manager.del + "?id=" + id;
        // var url = "";
        //   var data = { id };
        //   console.log("参数", data);
        //   _this
        //     .$confirm("是否确认删除？", "提示", {
        //       confirmButtonText: "确定",
        //       cancelButtonText: "取消",
        //       type: "warning",
        //     })
        //     .then(() => {
        //       jhTools.post(
        //         url,
        //         data,
        //         null,

        //         (res) => {
        //           console.log("结果", res);
        //           if (res.code == 200) {
        //             _this.$message({
        //               type: "success",
        //               message: "操作成功",
        //             });
        //             _this.getInitData();
        //           } else {
        //             _this.$message({
        //               type: "warning",
        //               message: res.message,
        //             });
        //           }
        //         },
        //         (err) => {
        //           console.log(err);
        //         }
        //       );
        //     })
        //     .catch(() => {
        //       this.$message({
        //         type: "info",
        //         message: "已取消",
        //       });
        //     });
        // },

        //查询
        handleSearch() {
          var {} = _this.formData;
          _this.LingChuang_request.handleSearch({
            pageIndex: _this.currentPageIdx,
            pageSize: _this.onePageSize,
          });
        },

        //添加
        handleAdd(e) {
          _this.$router.push({
            path: "/member_manager_add_page",
            query: {},
          });
        },
      };
    },

    //表格默认函数
    //初始化
    initRequest() {
      this.LingChuang_request = jhTools.LingChuang_request({
        this: this,
        pageUrl: this.tableConfig.reqApi,
        searchUrl: this.tableConfig.reqApi,
        searchData: {},
      });
      // console.log(this.LingChuang_request);
    },
    //加载数据
    getInitData: function () {
      var _this = this;
      if (JSON.stringify(this.tableConfig.eParams) == "{}")
        this.tableConfig.eParams = {};

      this.LingChuang_request.getInitData(
        {
          pageIndex: this.currentPageIdx,
          pageSize: this.onePageSize,
          ...this.tableConfig.eParams,
        },
        function (res) {
          var resData = res.data.records || res.data;
          for (var itemKey in resData) {
            _this.defaultTableData[itemKey] = resData[itemKey];
          }
          var checkId = _this.curCheckArr[0];
          // var curSelector = {};
          // _this.defaultTableData.forEach((item, index) => {
          //   if (item.id == checkId) {
          //     _this.defaultToggleSelection([item]);
          //   }
          // });
          // console.log(66668888, _this.multipleSelection, _this.curCheckArr)
          _this.showTableKey = Math.random().toFixed(4);
        }
      );
    },
    //格式化数据
    formatData() {
      this.LingChuang_request.formatData();
    },
    //格式化页面
    formatPaging(res) {
      this.LingChuang_request.formatPaging(res);
    },
    //页数跳转
    handleSizeChange(val) {
      this.LingChuang_request.handleSizeChange(val);
    },
    //页面点击跳转
    handleCurrentChange(val) {
      this.LingChuang_request.handleCurrentChange(val);
    },
    //enter跳转
    handleEnter() {
      this.LingChuang_request.getPagingData(
        this.currentPageIdx,
        this.onePageSize
      );
    },
    //分页数据
    getPagingData(pageIndex, pageSize) {
      this.LingChuang_request.handleEnter(pageIndex, pageSize);
    },
    //列表勾选1
    toggleSelection(rows) {
      this.LingChuang_request.toggleSelection(rows);
    },
    //列表勾选2
    handleSelectionChange(checkArr) {
      // this.LingChuang_request.handleSelectionChange(checkArr);

      if (checkArr.length > 1) {
        this.$message({
          type: "warning",
          message: "只能选择一项",
        });
      } else if (checkArr.length == 0) {
        this.$message({
          type: "warning",
          message: "请勾选一项",
        });
      } else if (checkArr.length == 1) {
        this.multipleSelection.length = 0;
        this.multipleSelection.push(checkArr[0]);
      }
    },

    /* 默认勾选 */
    defaultToggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          console.log(this.multipleSelection);
          this.$refs.multipleTable.toggleRowSelection(row);
          console.log(this.multipleSelection);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //表格默认函数
  },
  //method end
};
</script>

<style lang="scss" scoped>
/* 表格标题 */
.table-title {
  height: 50px;
  text-align: center;
  font-size: 26px;
  line-height: 50px;
  margin-bottom: 10px;
}

/*  */
.big-list {
  padding: 30px;
}

/* 表格按钮 */
.btn-group {
  width: 100%;
  min-height: 30px;
  // border: 1px solid #ddd;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;

  div {
    display: inline-block;
    line-height: 30px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 60px;
    text-align: center;
    transition: 0.3s linear all;
    font-size: 14px;
    margin-right: 10px;
  }

  div:hover {
    cursor: pointer;
    background-color: #f0f0f0;
    transition: 0.3s linear all;
  }
}

.list {
  width: 100%;
  border: 0.1px solid #333;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}

.pagging {
  display: flex;
  flex-direction: row;

  .table-paging-wrap {
    text-align: center;
    margin: 10 auto;
    .table-paging {
      width: 200px !important;
    }
  }
  .table-paging.el-pagination {
    text-align: center !important;
  }
  .confirm-btn {
    display: inline-block;
  }
}
</style>

